<template>
    <div class="card-set">
        <div class="card-item">
            <div class="card-img">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-vihanblogzhuti"></use>
                </svg>
            </div>
            <div class="car-descibe">
                <a href="#">发现资源</a>
                <p>轻轻一点，优质编程资源尽收眼底</p>
            </div>
        </div>
        <div class="card-item">
            <div class="card-img">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-vihanblogziliao"></use>
                </svg>
            </div>
            <div class="car-descibe">
                <a href="#">发现资源</a>
                <p>轻轻一点，优质编程资源尽收眼底</p>
            </div>
        </div>
        <div class="card-item">
            <div class="card-img">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-vihanblogkele"></use>
                </svg>
            </div>
            <div class="car-descibe">
                <a href="#">发现资源</a>
                <p>轻轻一点，优质编程资源尽收眼底</p>
            </div>
        </div>
        <div class="card-item">
            <div class="card-img">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-vihanblogditu"></use>
                </svg>
            </div>
            <div class="car-descibe">
                <a href="#">发现资源</a>
                <p>轻轻一点，优质编程资源尽收眼底</p>
            </div>
        </div>
        <div class="card-item">
            <div class="card-img">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-vihanblogxinxi"></use>
                </svg>
            </div>
            <div class="car-descibe">
                <a href="#">发现资源源源源</a>
                <p>轻轻一点，优质编程资源尽收眼底</p>
            </div>
        </div>
        <div class="card-item">
            <div class="card-img">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-vihanblogzhuti"></use>
                </svg>
            </div>
            <div class="car-descibe">
                <a href="#">发现资源</a>
                <p>轻轻一点，优质编程资源尽收眼底</p>
            </div>
        </div>
    </div>
</template>
  <script>

  export default {
    name:'Card',
    components: {
      
    },
  };
  </script>
  <style scoped>
    .card-set{
        width: 80%;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 150px 150px 150px;
        margin: 0 auto;
        justify-content: space-around;
    }
    .card-item{
        width: 120px;
        text-align: center;
        margin: 0 auto;
        margin: 20px;
        align-items: center;
    }
    .icon{
        width: 80px;
        height: 80px;
    }
    .card-img{
        margin: 0 auto;
    }
    a{
        font-size: 20px;
    }
    @media screen and (max-width:768px) {
        .card-set{
            display: flex;
            flex-direction: column;
            width: 90%;
            
           
        }
        .card-item{
            width: 90%;
            display: flex;
            justify-content: space-between;
            align-items:center;
        }
        .card-img{
            flex: 100px;
        }
        .card-describe{
            flex: 200px;
        }
        

    }
    


  </style>